<template>
  <div>
    <el-form
      :model="widthdrawForm"
      :rules="widthdrawRules"
      ref="widthdrawRef"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="提现金额" prop="amount" style="width: 500px">
        <el-input-number
          :min="0"
          :controls="false"
          v-model="widthdrawForm.amount"
          style="width: 300px"
          placeholder="请输入提现金额"
        >
          <div slot="append">元</div>
        </el-input-number>
      </el-form-item>
      <el-form-item label="提现方式" prop="channel">
        <el-radio-group v-model="widthdrawForm.channel" style="width: 400px">
          <el-radio label="0">微信支付</el-radio>
          <el-radio label="1">支付宝</el-radio>
          <el-radio label="2">银行卡</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item
        label="姓名"
        prop="name"
        v-if="widthdrawForm.channel !== '0'"
      >
        <el-input
          v-model="widthdrawForm.name"
          style="width: 300px"
          placeholder="请输入真实姓名"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="账号"
        prop="account"
        v-if="widthdrawForm.channel === '1'"
      >
        <el-input
          v-model="widthdrawForm.account"
          style="width: 300px"
          placeholder="请输入正确支付宝账号"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="开户行"
        prop="bankName"
        v-if="widthdrawForm.channel === '2'"
      >
        <el-input
          v-model="widthdrawForm.bankName"
          style="width: 300px"
          placeholder="请输入正确开户行信息"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="账号"
        prop="account"
        v-if="widthdrawForm.channel === '2'"
      >
        <el-input
          v-model="widthdrawForm.account"
          style="width: 300px"
          placeholder="请输入正确银行账号"
        ></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop, Watch, Ref } from "vue-property-decorator";

@Component
export default class WithdrawDialog extends Vue {
  @Prop({
    type: Boolean,
    default: {},
  })
  addDialog: any;

  @Watch("addDialog")
  getAddDialog() {
    if (this.addDialog) {
      this.init();
    }
  }

  @Ref()
  readonly widthdrawRef: HTMLFormElement;

  widthdrawForm = {
    amount: "",
    channel: "0",
    name: "",
    account: "",
    bankName: "",
  };

  amountVlidator(rule, value, callback) {
    const regs = /^\d+.?\d{0,2}$/;
    if (!value) {
      callback(new Error("提现金额不能为空"));
    }
    if (!regs.test(value)) {
      callback(new Error("金额输入有误,数字最多保留两位小数"));
    } else {
      callback();
    }
  }

  widthdrawRules = {
    amount: [{ validator: this.amountVlidator, trigger: "blur" }],
    channel: [{ required: true, message: "请选择提现方式", trigger: "change" }],
    name: [{ required: true, message: "提现人姓名不能为空", trigger: "blur" }],
    account: [{ required: true, message: "账号不能为空", trigger: "blur" }],
    bankName: [
      { required: true, message: "开户行不能为空", trigger: "change" },
    ],
  };

  init() {
    this.widthdrawForm = {
      amount: "",
      channel: "0",
      name: "",
      account: "",
      bankName: "",
    };
  }

  /**
   * 对整个表单进行校验
   */
  validate() {
    return this.widthdrawRef.validate();
  }

  /**
   * 移除表单项的校验结果
   */
  clearValidate() {
    this.widthdrawRef.clearValidate();
  }
}
</script>
    
<style lang="scss" scoped>
</style>
